<template>
	<view class="settings-container">
		<!-- 渐变背景 -->
		<view class="gradient-bg"></view>
		
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-content">
				<view class="navbar-left" @click="goBack">
					<text class="back-icon">←</text>
				</view>
				<text class="navbar-title">设置</text>
			</view>
		</view>
		
		<!-- 设置列表 -->
		<view class="settings-section">
			<!-- 通用设置 -->
	
			
			<!-- 通知设置 -->
			<view class="section-card">
				<view class="section-title">通知设置</view>
				
				<view class="setting-item">
					<view class="item-left">
						<view class="item-icon notification">
							<text class="icon-text">🔔</text>
						</view>
						<view class="item-info">
							<text class="item-title">推送通知</text>
							<text class="item-desc">接收重要备忘提醒</text>
						</view>
					</view>
					<switch 
						:checked="settings.pushNotification" 
						@change="updateSetting('pushNotification', $event.detail.value)"
						color="#667eea"
					/>
				</view>
				
				<view class="setting-item">
					<view class="item-left">
						<view class="item-icon reminder">
							<text class="icon-text">⏰</text>
						</view>
						<view class="item-info">
							<text class="item-title">到期提醒</text>
							<text class="item-desc">备忘录到期时提醒</text>
						</view>
					</view>
					<switch 
						:checked="settings.dueReminder" 
						@change="updateSetting('dueReminder', $event.detail.value)"
						color="#667eea"
					/>
				</view>
				
				<view class="setting-item">
					<view class="item-left">
						<view class="item-icon sound">
							<text class="icon-text">🔊</text>
						</view>
						<view class="item-info">
							<text class="item-title">提示音</text>
							<text class="item-desc">播放通知提示音</text>
						</view>
					</view>
					<switch 
						:checked="settings.soundEnabled" 
						@change="updateSetting('soundEnabled', $event.detail.value)"
						color="#667eea"
					/>
				</view>
				
				<view class="setting-item">
					<view class="item-left">
						<view class="item-icon vibrate">
							<text class="icon-text">📳</text>
						</view>
						<view class="item-info">
							<text class="item-title">震动提醒</text>
							<text class="item-desc">通知时震动提醒</text>
						</view>
					</view>
					<switch 
						:checked="settings.vibrateEnabled" 
						@change="updateSetting('vibrateEnabled', $event.detail.value)"
						color="#667eea"
					/>
				</view>
			</view>
			
			<!-- 隐私设置 -->
			<view class="section-card">
				<view class="section-title">隐私设置</view>
				
				<view class="setting-item">
					<view class="item-left">
						<view class="item-icon lock">
							<text class="icon-text">🔒</text>
						</view>
						<view class="item-info">
							<text class="item-title">应用锁</text>
							<text class="item-desc">启动时需要验证身份</text>
						</view>
					</view>
					<switch 
						:checked="settings.appLock" 
						@change="updateSetting('appLock', $event.detail.value)"
						color="#667eea"
					/>
				</view>
				
				<view class="setting-item">
					<view class="item-left">
						<view class="item-icon fingerprint">
							<text class="icon-text">👆</text>
						</view>
						<view class="item-info">
							<text class="item-title">指纹解锁</text>
							<text class="item-desc">使用指纹快速解锁</text>
						</view>
					</view>
					<switch 
						:checked="settings.fingerprintEnabled" 
						@change="updateSetting('fingerprintEnabled', $event.detail.value)"
						color="#667eea"
					/>
				</view>
				
				<view class="setting-item">
					<view class="item-left">
						<view class="item-icon privacy">
							<text class="icon-text">🔐</text>
						</view>
						<view class="item-info">
							<text class="item-title">隐私模式</text>
							<text class="item-desc">隐藏敏感备忘内容</text>
						</view>
					</view>
					<switch 
						:checked="settings.privacyMode" 
						@change="updateSetting('privacyMode', $event.detail.value)"
						color="#667eea"
					/>
				</view>
			</view>
			
			<!-- 备份设置 -->
			<view class="section-card">
				<view class="section-title">备份设置</view>
				
				<view class="setting-item">
					<view class="item-left">
						<view class="item-icon auto-backup">
							<text class="icon-text">☁️</text>
						</view>
						<view class="item-info">
							<text class="item-title">自动备份</text>
							<text class="item-desc">定期自动备份数据</text>
						</view>
					</view>
					<switch 
						:checked="settings.autoBackup" 
						@change="updateSetting('autoBackup', $event.detail.value)"
						color="#667eea"
					/>
				</view>
				
				<view class="setting-item" @click="showBackupFrequencyModal">
					<view class="item-left">
						<view class="item-icon frequency">
							<text class="icon-text">⏱️</text>
						</view>
						<view class="item-info">
							<text class="item-title">备份频率</text>
							<text class="item-desc">{{ currentBackupFrequency.name }}</text>
						</view>
					</view>
					<text class="item-arrow">›</text>
				</view>
				
				<view class="setting-item">
					<view class="item-left">
						<view class="item-icon wifi-only">
							<text class="icon-text">📶</text>
						</view>
						<view class="item-info">
							<text class="item-title">仅WiFi备份</text>
							<text class="item-desc">只在WiFi环境下备份</text>
						</view>
					</view>
					<switch 
						:checked="settings.wifiOnlyBackup" 
						@change="updateSetting('wifiOnlyBackup', $event.detail.value)"
						color="#667eea"
					/>
				</view>
			</view>
			
			<!-- 其他设置 -->
			<view class="section-card">
				<view class="section-title">其他设置</view>
				
				<view class="setting-item" @click="clearCache">
					<view class="item-left">
						<view class="item-icon clear">
							<text class="icon-text">🧹</text>
						</view>
						<view class="item-info">
							<text class="item-title">清除缓存</text>
							<text class="item-desc">清理应用缓存数据</text>
						</view>
					</view>
					<text class="item-arrow">›</text>
				</view>
				
				<view class="setting-item" @click="checkUpdate">
					<view class="item-left">
						<view class="item-icon update">
							<text class="icon-text">🔄</text>
						</view>
						<view class="item-info">
							<text class="item-title">检查更新</text>
							<text class="item-desc">当前版本 v1.0.0</text>
						</view>
					</view>
					<text class="item-arrow">›</text>
				</view>
				
				<view class="setting-item" @click="resetSettings">
					<view class="item-left">
						<view class="item-icon reset">
							<text class="icon-text">🔄</text>
						</view>
						<view class="item-info">
							<text class="item-title">恢复默认</text>
							<text class="item-desc">重置所有设置为默认值</text>
						</view>
					</view>
					<text class="item-arrow">›</text>
				</view>
			</view>
		</view>
		

		
		<!-- 备份频率选择弹窗 -->
		<view class="modal-overlay" v-if="showBackupChoice" @click="hideBackupFrequencyModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">备份频率</text>
					<view class="close-btn" @click="hideBackupFrequencyModal">
						<text class="close-icon">×</text>
					</view>
				</view>
				<view class="choice-list">
					<view 
						class="choice-item" 
						v-for="(freq, index) in backupFrequencies" 
						:key="index"
						:class="{ active: currentBackupFrequency.value === freq.value }"
						@click="selectBackupFrequency(freq)"
					>
						<text class="choice-name">{{ freq.name }}</text>
						<text class="choice-desc">{{ freq.desc }}</text>
						<view class="choice-check" v-if="currentBackupFrequency.value === freq.value">
							<text class="check-icon">✓</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			settings: {
				pushNotification: true,
				dueReminder: true,
				soundEnabled: true,
				vibrateEnabled: true,
				appLock: false,
				fingerprintEnabled: false,
				privacyMode: false,
				autoBackup: true,
				wifiOnlyBackup: true
			},
			showBackupChoice: false,
			currentBackupFrequency: {
				value: 'daily',
				name: '每天'
			},
			backupFrequencies: [
				{ value: 'never', name: '从不', desc: '关闭自动备份' },
				{ value: 'daily', name: '每天', desc: '每天自动备份一次' },
				{ value: 'weekly', name: '每周', desc: '每周自动备份一次' },
				{ value: 'monthly', name: '每月', desc: '每月自动备份一次' }
			]
		}
	},
	

	
	onLoad() {
		this.loadSettings();
	},
	
	methods: {
		goBack() {
			uni.navigateBack();
		},
		
		loadSettings() {
			// 从本地存储加载设置
			const savedSettings = uni.getStorageSync('appSettings');
			if (savedSettings) {
				this.settings = { ...this.settings, ...savedSettings };
				
				// 恢复备份频率设置
				if (savedSettings.backupFrequency) {
					this.currentBackupFrequency = savedSettings.backupFrequency;
				}
				
				// 如果自动备份开启，启动备份定时器
				if (this.settings.autoBackup) {
					this.setBackupTimer();
				}
			}
		},
		

		
		saveSettings() {
			// 保存设置到本地存储
			const allSettings = {
				...this.settings,
				backupFrequency: this.currentBackupFrequency
			};
			uni.setStorageSync('appSettings', allSettings);
		},
		

		
		updateSetting(key, value) {
			this.settings[key] = value;
			this.saveSettings();
			this.handleSettingChange(key, value);
		},
		
		handleSettingChange(key, value) {
			// 处理各种设置变更的实际效果
			switch(key) {
				case 'pushNotification':
					if (value) {
						this.requestNotificationPermission();
					}
					uni.showToast({
						title: value ? '推送通知已开启' : '推送通知已关闭',
						icon: 'success'
					});
					break;
					
				case 'dueReminder':
					uni.showToast({
						title: value ? '到期提醒已开启' : '到期提醒已关闭',
						icon: 'success'
					});
					if (value) {
						this.scheduleReminders();
					}
					break;
					
				case 'soundEnabled':
					uni.showToast({
						title: value ? '提示音已开启' : '提示音已关闭',
						icon: 'success'
					});
					if (value) {
						// 播放测试音效
						this.playTestSound();
					}
					break;
					
				case 'vibrateEnabled':
					uni.showToast({
						title: value ? '震动提醒已开启' : '震动提醒已关闭',
						icon: 'success'
					});
					if (value) {
						// 测试震动
						this.testVibrate();
					}
					break;
					
				case 'appLock':
					if (value) {
						this.setupAppLock();
					} else {
						uni.showToast({
							title: '应用锁已关闭',
							icon: 'success'
						});
					}
					break;
					
				case 'fingerprintEnabled':
					if (value) {
						this.setupFingerprint();
					} else {
						uni.showToast({
							title: '指纹解锁已关闭',
							icon: 'success'
						});
					}
					break;
					
				case 'privacyMode':
					uni.showToast({
						title: value ? '隐私模式已开启' : '隐私模式已关闭',
						icon: 'success'
					});
					break;
					
				case 'autoBackup':
					if (value) {
						this.startAutoBackup();
					} else {
						this.stopAutoBackup();
					}
					break;
					
				case 'wifiOnlyBackup':
					uni.showToast({
						title: value ? '仅WiFi备份已开启' : '仅WiFi备份已关闭',
						icon: 'success'
					});
					break;
			}
		},
		
		requestNotificationPermission() {
			// #ifdef APP-PLUS
			plus.push.getClientInfo((info) => {
				uni.showToast({
					title: '通知权限已申请',
					icon: 'success'
				});
			}, (error) => {
				uni.showToast({
					title: '通知权限申请失败',
					icon: 'none'
				});
			});
			// #endif
			
			// #ifndef APP-PLUS
			uni.showToast({
				title: '通知权限已开启',
				icon: 'success'
			});
			// #endif
		},
		
		scheduleReminders() {
			// 安排提醒任务
			uni.showToast({
				title: '提醒任务已设置',
				icon: 'success'
			});
		},
		
		playTestSound() {
			// #ifdef APP-PLUS
			// 播放系统通知音效
			plus.device.beep(1);
			// #endif
			
			// #ifdef H5
			// 浏览器环境播放音效
			try {
				const audio = new Audio();
				audio.src = 'data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBjiN1fLNeSsFJHPA8N2QQAoUWLDn7q1cGAhAm9/zuV8cBj+N1/LMdyYEJnfF8N2QQAoTV7zj65hTEg1Kl/LMdyYEJnfF8N2QQAoTV7zj65hTEg1Kl/LMdyYEJnfF8N2QQAoTV7zj65hTEg1Kl/LMdyYEJnfF8N2QQAoTV7zj65hTEg1Kl/LMdyYEJnfF8N2QQAoTV7zj65hTEg1Kl/LMdyYEJnfF8N2QQAoT';
				audio.play();
			} catch (e) {
				console.log('音效播放失败');
			}
			// #endif
		},
		
		testVibrate() {
			// #ifdef APP-PLUS
			plus.device.vibrate(300);
			// #endif
			
			// #ifdef H5
			if (navigator.vibrate) {
				navigator.vibrate(300);
			}
			// #endif
		},
		
		setupAppLock() {
			uni.showModal({
				title: '设置应用锁',
				content: '应用锁将在下次启动时生效，需要验证身份才能进入应用',
				success: (res) => {
					if (res.confirm) {
						uni.showToast({
							title: '应用锁已开启',
							icon: 'success'
						});
					} else {
						this.settings.appLock = false;
						this.saveSettings();
					}
				}
			});
		},
		
		setupFingerprint() {
			// #ifdef APP-PLUS
			uni.checkIsSupportSoterAuthentication({
				success: (res) => {
					if (res.supportMode.includes('fingerPrint')) {
						uni.startSoterAuthentication({
							requestAuthModes: ['fingerPrint'],
							challenge: 'test123',
							authContent: '请验证指纹以开启指纹解锁',
							success: () => {
								uni.showToast({
									title: '指纹解锁已开启',
									icon: 'success'
								});
							},
							fail: () => {
								this.settings.fingerprintEnabled = false;
								this.saveSettings();
								uni.showToast({
									title: '指纹验证失败',
									icon: 'none'
								});
							}
						});
					} else {
						this.settings.fingerprintEnabled = false;
						this.saveSettings();
						uni.showToast({
							title: '设备不支持指纹识别',
							icon: 'none'
						});
					}
				},
				fail: () => {
					this.settings.fingerprintEnabled = false;
					this.saveSettings();
					uni.showToast({
						title: '设备不支持指纹识别',
						icon: 'none'
					});
				}
			});
			// #endif
			
			// #ifndef APP-PLUS
			// 非App环境模拟指纹设置
			uni.showModal({
				title: '模拟指纹设置',
				content: '是否开启指纹解锁功能？',
				success: (res) => {
					if (res.confirm) {
						uni.showToast({
							title: '指纹解锁已开启',
							icon: 'success'
						});
					} else {
						this.settings.fingerprintEnabled = false;
						this.saveSettings();
					}
				}
			});
			// #endif
		},
		
		startAutoBackup() {
			uni.showToast({
				title: '自动备份已开启',
				icon: 'success'
			});
			
			// 设置定时备份任务
			this.setBackupTimer();
		},
		
		stopAutoBackup() {
			uni.showToast({
				title: '自动备份已关闭',
				icon: 'success'
			});
			
			// 清除定时备份任务
			this.clearBackupTimer();
		},
		
		setBackupTimer() {
			// 根据备份频率设置定时器
			const frequency = this.currentBackupFrequency.value;
			let interval = 0;
			
			switch(frequency) {
				case 'daily':
					interval = 24 * 60 * 60 * 1000; // 24小时
					break;
				case 'weekly':
					interval = 7 * 24 * 60 * 60 * 1000; // 7天
					break;
				case 'monthly':
					interval = 30 * 24 * 60 * 60 * 1000; // 30天
					break;
				default:
					return;
			}
			
			// 这里可以设置实际的定时备份逻辑
			console.log(`自动备份频率设置为: ${frequency}, 间隔: ${interval}ms`);
		},
		
		clearBackupTimer() {
			// 清除备份定时器
			console.log('自动备份定时器已清除');
		},
		

		
		showBackupFrequencyModal() {
			this.showBackupChoice = true;
		},
		
		hideBackupFrequencyModal() {
			this.showBackupChoice = false;
		},
		
		selectBackupFrequency(freq) {
			this.currentBackupFrequency = freq;
			this.hideBackupFrequencyModal();
			this.saveSettings();
			uni.showToast({
				title: `备份频率已设为${freq.name}`,
				icon: 'success'
			});
		},
		
		clearCache() {
			uni.showModal({
				title: '确认清除',
				content: '确定要清除应用缓存吗？这不会删除您的备忘录数据。',
				success: (res) => {
					if (res.confirm) {
						uni.showLoading({
							title: '清理中...'
						});
						
						setTimeout(() => {
							// 实际清除缓存操作
							this.performClearCache();
							
							uni.hideLoading();
							uni.showToast({
								title: '缓存清理完成',
								icon: 'success'
							});
						}, 1500);
					}
				}
			});
		},
		
		performClearCache() {
			try {
				// 清除图片缓存
				// #ifdef APP-PLUS
				plus.cache.clear(() => {
					console.log('App缓存清理完成');
				});
				// #endif
				
				// 清除本地临时数据
				const tempKeys = ['tempData', 'imageCache', 'audioCache'];
				tempKeys.forEach(key => {
					uni.removeStorageSync(key);
				});
				
				console.log('缓存清理完成');
			} catch (error) {
				console.error('缓存清理失败:', error);
			}
		},
		
		checkUpdate() {
			uni.showLoading({
				title: '检查中...'
			});
			
			// 模拟检查更新过程
			setTimeout(() => {
				uni.hideLoading();
				
				// 随机模拟更新检查结果
				const hasUpdate = Math.random() > 0.7; // 30%几率有更新
				
				if (hasUpdate) {
					const newVersion = 'v1.1.0';
					const updateFeatures = [
						'• 新增深色主题支持',
						'• 优化备忘录搜索功能',
						'• 修复已知bug',
						'• 提升应用性能'
					];
					
					uni.showModal({
						title: `发现新版本 ${newVersion}`,
						content: `更新内容：\n${updateFeatures.join('\n')}`,
						confirmText: '立即更新',
						cancelText: '稍后提醒',
						success: (res) => {
							if (res.confirm) {
								this.performUpdate(newVersion);
							} else {
								uni.showToast({
									title: '已推迟更新',
									icon: 'none'
								});
							}
						}
					});
				} else {
					uni.showModal({
						title: '检查更新',
						content: '当前已是最新版本 v1.0.0',
						showCancel: false,
						confirmText: '知道了'
					});
				}
			}, 2000);
		},
		
		performUpdate(version) {
			// #ifdef APP-PLUS
			// App环境下的更新逻辑
			uni.showModal({
				title: '开始更新',
				content: '正在准备下载更新包...',
				showCancel: false,
				confirmText: '确定'
			});
			// #endif
			
			// #ifndef APP-PLUS
			// 非App环境提示
			uni.showModal({
				title: '更新提示',
				content: '请前往应用商店或官网下载最新版本',
				showCancel: false,
				confirmText: '知道了'
			});
			// #endif
		},
		
		resetSettings() {
			uni.showModal({
				title: '确认重置',
				content: '确定要恢复所有设置为默认值吗？此操作不可撤销。',
				confirmColor: '#ff4757',
				success: (res) => {
					if (res.confirm) {
						// 重置为默认设置
						this.settings = {
							pushNotification: true,
							dueReminder: true,
							soundEnabled: true,
							vibrateEnabled: true,
							appLock: false,
							fingerprintEnabled: false,
							privacyMode: false,
							autoBackup: true,
							wifiOnlyBackup: true
						};
						this.currentBackupFrequency = { value: 'daily', name: '每天' };
						
						this.saveSettings();
						
						uni.showToast({
							title: '设置已重置',
							icon: 'success'
						});
					}
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.settings-container {
	width: 100%;
	min-height: 100vh;
	position: relative;
	background: #f8f9fa;
	color: #333333;
}

.gradient-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	z-index: 0;
}

.custom-navbar {
	position: relative;
	z-index: 1;
	height: 88rpx;
	margin-top: var(--status-bar-height);
	background: transparent;
	padding-top: 60rpx;
}

.navbar-content {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
}

.navbar-left {
	width: 80rpx;
	height: 60rpx;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.navbar-left:active {
	background: rgba(255, 255, 255, 0.3);
	transform: scale(0.95);
}

.back-icon {
	font-size: 36rpx;
	color: #fff;
	font-weight: bold;
}

.navbar-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.settings-section {
	position: relative;
	z-index: 1;
	padding: 60rpx 30rpx 40rpx;
}

.section-card {
	background: #ffffff;
	border-radius: 30rpx;
	padding: 40rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.1);
	border: 1rpx solid #e5e5e5;
}

.section-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 30rpx;
}

.setting-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
	transition: all 0.3s ease;
}

.setting-item:last-child {
	border-bottom: none;
}

.setting-item:active {
	background: rgba(102, 126, 234, 0.05);
	border-radius: 16rpx;
	margin: 0 -20rpx;
	padding: 30rpx 20rpx;
}

.item-left {
	display: flex;
	align-items: center;
	flex: 1;
}

.item-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 24rpx;
	
	&.theme {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
	
	&.language {
		background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
	}
	
	&.font {
		background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
	}
	
	&.notification {
		background: linear-gradient(135deg, #ff9500 0%, #ffad33 100%);
	}
	
	&.reminder {
		background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
	}
	
	&.sound {
		background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
	}
	
	&.vibrate {
		background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
	}
	
	&.lock {
		background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
	}
	
	&.fingerprint {
		background: linear-gradient(135deg, #8fd3f4 0%, #84fab0 100%);
	}
	
	&.privacy {
		background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
	}
	
	&.auto-backup {
		background: linear-gradient(135deg, #fd79a8 0%, #fdcb6e 100%);
	}
	
	&.frequency {
		background: linear-gradient(135deg, #e17055 0%, #74b9ff 100%);
	}
	
	&.wifi-only {
		background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
	}
	
	&.clear {
		background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
	}
	
	&.update {
		background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%);
	}
	
	&.reset {
		background: linear-gradient(135deg, #fab1a0 0%, #e17055 100%);
	}
}

.icon-text {
	font-size: 32rpx;
}

.item-info {
	flex: 1;
}

.item-title {
	display: block;
	font-size: 30rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 8rpx;
}

.item-desc {
	display: block;
	font-size: 26rpx;
	color: #666;
	opacity: 0.7;
}

.item-arrow {
	font-size: 36rpx;
	color: #ccc;
	margin-left: 20rpx;
}

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.modal-content {
	width: 100%;
	max-height: 70%;
	background: #fff;
	border-radius: 30rpx 30rpx 0 0;
	overflow: hidden;
}

.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 40rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.modal-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
}

.close-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 30rpx;
	background: #f8f9fa;
}

.close-icon {
	font-size: 36rpx;
	color: #666;
}

.choice-list {
	padding: 20rpx 40rpx 40rpx;
	max-height: 60vh;
	overflow-y: auto;
}

.choice-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
	transition: all 0.3s ease;
	
	&.active {
		.choice-name {
			color: #667eea;
			font-weight: 600;
		}
	}
}

.choice-item:last-child {
	border-bottom: none;
}

.choice-item:active {
	background: rgba(102, 126, 234, 0.05);
	border-radius: 16rpx;
	margin: 0 -20rpx;
	padding: 30rpx 20rpx;
}

.choice-name {
	font-size: 30rpx;
	color: #333;
}

.choice-desc {
	font-size: 24rpx;
	color: #999;
	margin-left: 20rpx;
}

.choice-check {
	width: 40rpx;
	height: 40rpx;
	border-radius: 20rpx;
	background: #667eea;
	display: flex;
	align-items: center;
	justify-content: center;
}

.check-icon {
	font-size: 24rpx;
	color: #fff;
	font-weight: bold;
}
</style> 